<template>
  <div class="cesium-example">
    <div class="example-nav pt-2">
      <el-collapse accordion>
        <el-collapse-item
          v-for="(item, index) in treeData"
          :key="index"
          :title="item.name"
          :name="index"
        >
          <template #title>
            <div
              class="pl-4 flex items-center gap-x-2 cursor-pointer hover:text-green-600"
            >
              <img
                v-if="item.icon"
                :src="item.icon"
                alt="图标"
                class="w-[20px] h-[20px]"
              />
              <span class="text-sm">{{ item.name }}（{{ item.count }}）</span>
            </div>
          </template>
          <ul
            v-if="item.children.length !== 0"
            class="flex flex-col gap-y-3 pl-[44px] pt-1 text-sm"
          >
            <li
              class="cursor-pointer hover:text-green-600"
              :class="{ 'text-green-600': childItem.id === activeTreeData?.id }"
              v-for="(childItem, childIndex) in item.children"
              :key="childIndex"
              @click="handleOnTreeItemClick(childItem)"
            >
              {{ childItem.name }}（{{ childItem.count }}）
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="border-l border-gray-200 pl-3 overflow-hidden overflow-y-auto" style="width: calc(100% - 260px);">
        <div class="flex items-center justify-between pr-4 pt-2" style="position: sticky;top: 0;">
            <ul class="flex-grow flex py-3 pl-3 gap-2 bg-white" v-html="computedRouterNavText"></ul>
            <div class="w-[300px]">
                <el-input v-model="searchKey" placeholder="请输入示例名称">
                    <template #append>
                        <el-button :icon="Search"/>
                    </template>
                </el-input>
            </div>
        </div>

        <div v-if="filterTemplateData.length===0" class="w-full min-h-[500px] flex flex-wrap items-center justify-center">
            <el-empty description="无数据"/>
        </div>
        <ul v-else class="p-0.5 pb-4 flex flex-wrap items-start justify-start scroll-smooth">
            <li
                class="sm:w-6/12 md:w-6/12 lg:w-3/12 xl:w-2/12 p-3"
                v-for="(item,index) in filterTemplateData" :key="index"
                @click="handleToExample(item,index)"
            >
                <div class="w-full h-full cursor-pointer rounded overflow-hidden transition-all hover:shadow-lg">
                    <img class="w-full md:h-[170px] sm:h-[90px] border-none outline-none object-cover" :src="item.cover" alt="封面">
                    <div class="bg-green-600 text-white text-xs text-center py-1.5">{{ item.title }}</div>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useExamplesStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
import { loadAllExampleModules } from "@/data/index.js";
import { Search } from "@element-plus/icons-vue";

const { dataExampleList, dataTreeList } = storeToRefs(useExamplesStore());
const router = useRouter();
loadAllExampleModules();

const treeData = ref(dataTreeList.value);
const activeTreeData = ref(null);
const exampleData = ref([]);

watch(
  () => dataExampleList.value,
  (newVal) => {
    exampleData.value = newVal;
  }
);

watch(
  () => dataTreeList.value,
  (newVal) => {
    treeData.value = newVal;
  }
);

const searchKey = ref("");
const filterTemplateData = computed(() => {
  const searchValue = searchKey.value.trim();
  if (!searchValue) return exampleData.value;
  return exampleData.value.filter(
    (x) =>
      x.title.indexOf(searchValue) !== -1 || x.desc.indexOf(searchValue) !== -1
  );
});

// 计算路由显示的文本
const computedRouterNavText = computed(() => {
  if (!activeTreeData.value) return "全部";
  const parent = treeData.value.find(
    (item) => item.id === activeTreeData.value?.pid
  );
  if (!parent) return "全部";
  return `<li> ${parent.name}（${
    parent.count || 0
  }）</li><li>/</li> <li class="text-green-600">${activeTreeData.value.name}（${
    activeTreeData.value.count || 0
  }）</li>`;
});

const handleOnTreeItemClick = (item) => {
  exampleData.value = dataExampleList.value.filter((x) => x.pid === item.id);
  activeTreeData.value = item;
};

const handleToExample = (payload, index) => {
  if (payload.template === "page") {
    router.push({
      path: payload.routerPath,
      query: { id: index, title: payload.title }
    });
  } else if (payload.template === "example") {
    router.push({
      path: payload.routerPath,
      query: { id: payload.id, title: payload.title }
    });
  }
};
</script>
<style lang="scss" scoped>
.cesium-example {
  display: flex;
  height: 100%;
  width: 100%;
  .example-nav {
    width: 260px;
    height: 100%;
    .example-nav-title {
      display: flex;
      align-items: center;
    }
    .example-nav-ul {
      padding-left: 20px;
      li {
        cursor: pointer;
      }
    }
  }
  .example-menu {
    width: calc(100% - 260px);
    height: 100%;
    border: 1px solid red;
    .example-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      width: 100%;
      height: 50px;
      padding: 0 10px;
      border: 1px solid green;
      border-radius: 5px;
      .menu-header-ul {
        line-height: 50px;
        display: flex;
      }
    }
    .example-menu-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 13px;
      width: 100%;
      height: calc(100% - 50px);
      padding: 10px;
      border: 1px solid blue;
      overflow: auto;
      li {
        cursor: pointer;
        border-radius: 10px;
        border: 1px solid red;
        overflow: hidden;
      }
    }
  }
  .content-img {
    width: 185px;
    height: 185px;
    img {
      width: 185px;
      height: 185px;
    }
  }
}
</style>
<style scoped>
:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}
</style>
